<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>明朝那些事</title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="full-screen" content="true">
    <meta name="screen-orientation" content="landscape">
    <meta name="x5-fullscreen" content="true">
    <meta name="360-fullscreen" content="true">
    <meta http-equiv="expires" content="0">
    <meta name="format-detection" content="telephone=no">
    <meta name="wap-font-scale" content="no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<script type="text/javascript">
	!function(e){var t,n=e.document.documentElement;function i(){var e=n.getBoundingClientRect().width;e>640&&(e=640);var t=e/6.4;n.style.fontSize=t+"px"}e.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(i,300)},!1),e.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(t),t=setTimeout(i,300))},!1),i()}(window);
	</script>
	<link rel="stylesheet" type="text/css" href="assets/vue-virtual-scroller.css" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="assets/vue-virtual-scroller.min.js"></script>
	<style type="text/css">
		* { margin: 0; padding: 0; border: none; font-size: 0.20rem; }
		ul, ol, li { list-style: none; }
		#app { font-family: "Microsoft YaHei"; }
		.header {
			width: 100%;
		    height: 0.64rem;
		    line-height: 0.64rem;
		    font-size: 0.24rem;
		    background: #333;
		    text-align: center;
		    color: white;
		}
		#player-cont {
			width: 100%; height: 0.84rem; margin: 0.20rem 0; text-align: center;
		}
		#player {
			
		}
		#list {
			width: 6.2rem;
			margin: auto;
		}
		#list li {
		    float: left;
		    overflow: hidden;
		    margin: 0.18rem 0.09rem 0 0.09rem;
		    padding: 0.05rem;
		    width: 0.74rem;
		    display: inline-block;
		    height: 0.32rem;
		    line-height: 0.32rem;
		    text-align: center;
		    background: #D8D7D7;
		}
		.red {
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="header">{{ title }}</div>
		<div id="player-cont">
			<audio id="player" controls="controls" autoplay ref="player" style="">
				<source ref="player_source" src="" type="audio/mpeg">
			</audio>
		</div>
		<!-- <ul id="list">
			<li v-for="(item, index) in media_list" v-on:click="goAndPlay(index)" :class="cur===index? 'red': ''"> {{item[0]}} </li>
		</ul> -->
		<div id="list"
			style="overflow: hidden;">
			<recycle-scroller
				ref="scroller"
				class="scroller"
				key-field="id"
				:items="media_list"
				:item-height="itemHeight">
				<template slot-scope="{ item, index, active }">
					<div class="item"
						@click="goAndPlay(index)">
						<p class="title">{{ item[0] }}</p>
						<p class="artist">{{ item[1] }}</p>
					</div>
				</template>
			</recycle-scroller>
		</div>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		components: {
			'recycle-scroller': VueVirtualScroller.RecycleScroller,
			'dynamic-scroller': VueVirtualScroller.DynamicScroller
		},
		data: {
			cur: 0,
		    title: '明朝那些事',
		    media_list: getList()
		},
		computed: {
			itemHeight() {
				return 20;
			}
		},
		methods: {
			goAndPlay: function(index) {
				var $player = this.$refs.player;
				this.$refs.player_source.src = "http://audio.xmcdn.com/" + this.media_list[index][1];
				$player.addEventListener('load', function() {
					$player.play();
				});
				this.cur = index;
			}
		}
	});

	function getList() {
		var list = [
			["第1集", "group18/M04/3A/7B/wKgJJVePD7ORC6mGALLupkD8_rc109.m4a", "mp3"],
			["第2集", "group19/M08/3A/87/wKgJJlePEJmxEoIrALYn6OIqriM392.m4a", "mp3"],
			["第3集", "group20/M06/3A/6C/wKgJJ1ePEOLCeMoFALSZ9ijTg0o081.m4a", "mp3"],
			["第4集", "group18/M01/3A/3C/wKgJKlePERiz17zTAK-QrHgaLlw722.m4a", "mp3"],
			["第5集", "group17/M06/3A/82/wKgJKVePEUjDrci_ALOmMvUxq0c619.m4a", "mp3"],
			["第6集", "group20/M09/3A/6D/wKgJJ1ePEXmRrD12ALYsTio4ymo130.m4a", "mp3"],
			["第7集", "group19/M00/3A/55/wKgJK1ePEazD1QxyALKAgkUCPM0207.m4a", "mp3"],
			["第8集", "group17/M0B/3A/84/wKgJKVePEfGz3XqFALKjvpTZnGs221.m4a", "mp3"],
			["第9集", "group18/M0B/3A/3F/wKgJKlePEj7SOfdoALR7IGDqWTg251.m4a", "mp3"]
		];
		return list;
	}
</script>
</html>